<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link rel="stylesheet" href="lib/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/normal.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <main>
        <!-- 头部 -->
        <header>
            <div class="logo">
                <img src="images/logo.png" alt="">
            </div>
            <div class="search">
                <span class="iconfont icon-sear"></span>
                <input type="text" placeholder="搜一搜">
            </div>

        </header>

        <!-- 轮播图 -->
        <div class="banner">
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="images/banner-pic1.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="images/banner-pic2.jpeg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="images/banner-pic3.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="images/banner-pic4.jpeg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="images/banner-pic5.jpeg" alt="">
                    </div>
                </div>
                <!-- <div class="swiper-pagination"></div> -->
            </div>
        </div>

        <!-- 展示区 -->
        <ul class="main-show">
            <li class="show-item">
                <a href="#" class="show-rank">
                    <img src="/images/market.png" alt="">
                    <span>上新精选</span>
                </a>
            </li>
            <li class="show-item">
                <a href="#" class="show-rank">
                    <img src="/images/camputer.png" alt="">
                    <span>数码电器</span>
                </a>
            </li>
            <li class="show-item">
                <a href="#" class="show-rank">
                    <img src="/images/j.png" alt="">
                    <span>新百货</span>
                </a>
            </li>
            <li class="show-item">
                <a href="#" class="show-rank">
                    <img src="/images/fresh.png" alt="">
                    <span>小米生鲜</span>
                </a>
            </li>
            <li class="show-item">
                <a href="#" class="show-rank">
                    <img src="/images/home.png" alt="">
                    <span>小米到家</span>
                </a>
            </li>
            <li class="show-item">
                <a href="#" class="show-rank">
                    <img src="/images/recharge.png" alt="">
                    <span>充值缴费</span>
                </a>
            </li>
            <li class="show-item">
                <a href="#" class="show-rank">
                    <img src="/images/near.png" alt="">
                    <span>附近好店</span>
                </a>
            </li>
            <li class="show-item">
                <a href="#" class="show-rank">
                    <img src="/images/coupons.png" alt="">
                    <span>领券</span>
                </a>
            </li>
            <li class="show-item">
                <a href="#" class="show-rank">
                    <img src="/images/cash.png" alt="">
                    <span>领金贴</span>
                </a>
            </li>
            <li class="show-item">
                <a href="#" class="show-rank">
                    <img src="/images/vip.png" alt="">
                    <span>PLUS会员</span>
                </a>
            </li>
        </ul>

        <!-- 众筹区 -->
        <div class="crowd">
            <div class="crowd-hd">
                <p class="title">小米有品众筹
                    <span>1元支持</span>
                </p>
                <a href="crowd.html">
                    <span class="ing">4款众筹中 <span class="iconfont icon-next"></span> </span>
                </a>

            </div>

            <!-- 众筹主体 -->
            <div class="crowd-bd">
                <!-- 左侧 -->
                <div class="left">
                    <div class="left-top">
                        <div class="desc">
                            <p>小默魔法相机</p>

                            <span class="num">￥799</span>
                        </div>
                        <img src="images/camera.png" alt="">
                    </div>
                    <div class="left-fd">
                        <span>
                            <span class="red">1341</span>人支持
                        </span>
                        <span>完成度<span class="red">104%</span></span>
                    </div>
                </div>
                <!-- 右侧 -->
                <div class="right">
                    <div class="ri-left">
                        <img src="images/cloth.png" alt="">
                        <div class="fd">
                            <p>战术三防抗寒</p>
                            <span class="red">￥229</span>
                        </div>
                    </div>
                    <div class="ri-right">
                        <img src="images/water.png" alt="">
                        <div class="fd">
                            <p>战术三防抗寒</p>
                            <span class="red">￥229</span>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品陈列区 -->

        <div class="display">
            <a href="#" class="display-item">
                <img src="images/tv.png" alt="">
                <div class="display-item-fd">
                    <p>影音大牌放价</p>
                    <span>5折抢家庭影院</span>
                </div>

            </a>
            <a href="#" class="display-item">
                <img src="images/cloths.png" alt="">
                <div class="display-item-fd two">
                    <p>早风户外</p>
                    <span>整点低价秒杀</span>
                </div>

            </a>
            <a href="#" class="display-item">
                <img src="images/remand.png" alt="">
                <div class="display-item-fd three">
                    <p>智能锁大牌日</p>
                    <span>门锁低至899元</span>
                </div>

            </a>
            <a href="#" class="display-item">
                <img src="images/fan.png" alt="">
                <div class="display-item-fd four">
                    <p>爆款小家电</p>
                    <span>5折秒杀</span>
                </div>

            </a>
            <a href="#" class="display-item">
                <img src="images/watch.png" alt="">
                <div class="display-item-fd five">
                    <p>小米狂欢荟</p>
                    <span>好物2件88折</span>
                </div>

            </a>
            <a href="#" class="display-item">
                <img src="images/race.png" alt="">
                <div class="display-item-fd six">
                    <p>居家1元秒</p>
                    <span>预付定金赢免单</span>
                </div>

            </a>
        </div>

        <!-- 微淘众筹 -->
        <div class="con fundraising">
            <div class="con-content">
                <!-- 第一部分 -->
                <div class="con-hd">
                    <p>微淘众筹</p>
                    <a href="crowd.html"><span>更多 <span class="iconfont icon-next"></span></span></a>

                </div>

                <!-- 第二部分 -->
                <div class="con-bd">
                    <div class="con-bd-main">
                        <div class="left">
                            <p>大屏互动学习机</p>
                            <span class="desc">国际护眼认证|双摄像头设计|远程监课|家长的好帮手</span>
                            <span class="red">￥1999</span>
                        </div>
                        <div class="right">
                            <img src="images/ipad.png" alt="">
                        </div>
                        <div class="line"></div>
                    </div>

                    <div class="con-bd-fd">
                        <p><span class="hot">热</span>支持人数<span class="orange">730</span> / 完成度<span
                                class="orange">146%</span></p>
                        <p class="line"></p>
                    </div>
                </div>

                <!-- 第三部分 -->
                <div class="con-fd">
                    <div class="left">
                        <p>小嘀全自动猫眼锁</p>
                        <span class="red">￥1999</span>
                        <div class="cont">
                            <img src="images/catlock.png" alt="">
                        </div>
                        <div class="con-bd-fd">
                            <p><span class="hot">热</span>支持人数<span class="orange">673</span>
                            </p>
                            <p class="line"></p>
                        </div>
                    </div>

                    <div class="right">
                        <p>样子戚风电动沙发</p>
                        <span class="red">￥1599</span>
                        <div class="cont">
                            <img src="images/sofa.png" alt="">
                        </div>
                        <div class="con-bd-fd">
                            <p><span class="hot">火</span>支持人数<span class="orange">1112</span>
                            </p>
                            <p class="line"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 好物榜 -->
        <div class="con good">
            <!-- 头部 -->
            <div class="con-hd">
                <p>好物榜</p>
            </div>
            <!-- 主体 -->
            <ul class="good-bd">
                <li class="goods-item">
                    <div class="img">
                        <img src="images/sportsCloth.png" alt="">
                    </div>
                    <div class="box">
                        <p>运动服饰</p>
                        <p>99%好评率</p>
                        <p class="bang">好评榜</p>
                    </div>
                </li>
                <li class="goods-item">
                    <p class="title">24小时最热</p>
                    <div class="img">
                        <img src="images/jing.png" alt="">
                    </div>
                    <div class="box">
                        <p>微淘排行榜</p>
                        <p>今日销量爆品</p>
                    </div>

                </li>
                <li class="goods-item">
                    <div class="img">
                        <img src="images/cheng.png" alt="">
                    </div>
                    <div class="box">
                        <p>个护健康</p>
                        <p>热销指数1000</p>
                        <p class="bang">热销榜</p>
                    </div>

                </li>
            </ul>
        </div>

        <!-- 热销榜 -->
        <div class="con good">
            <!-- 头部 -->
            <div class="con-hd">
                <p>热销榜
                    <span>排序由销量、搜索、好评扽分综合得出
                    </span>
                </p>
                <span>更多 <span class="iconfont icon-next"></span></span>
            </div>
            <!-- 主体 -->
            <ul class="good-bd hot">
                <li class="goods-item">
                    <div class="img">
                        <img src="images/watsh.png" alt="">
                    </div>
                    <div class="box">
                        <p>智能扫托机器人</p>
                        <p>米家扫地机器人</p>
                    </div>
                    <div class="logo">
                        1
                        <div class="tanr"></div>
                    </div>
                </li>
                <li class="goods-item">
                    <div class="img">
                        <img src="images/screen.png" alt="">
                    </div>
                    <div class="box">
                        <p>21:9超宽鱼屏，1啦啦啦啦</p>
                        <p>小米显示器34英寸</p>
                    </div>
                    <div class="logo">
                        2
                        <div class="tanr"></div>
                    </div>

                </li>
                <li class="goods-item">
                    <div class="img">
                        <img src="images/frage.png" alt="">
                    </div>
                    <div class="box">
                        <p>AL语音控制</p>
                        <p>云米大屏冰箱450L</p>
                    </div>
                    <div class="logo">
                        3
                        <div class="tanr"></div>
                    </div>

                </li>
            </ul>
        </div>

        <!-- 限时购 -->
        <div class="con good">
            <!-- 头部 -->
            <div class="con-hd">
                <p>限时购
                    <span>10点场</span>
                </p>

                <span>更多 <span class="iconfont icon-next"></span></span>
            </div>
            <!-- 主体 -->
            <ul class="good-bd hot limit">
                <li class="goods-item">
                    <div class="img">
                        <img src="images/limit-frage.png" alt="">
                    </div>
                    <p><span class="red">￥1299</span><del class="del">￥1699</del></p>
                </li>
                <li class="goods-item">
                    <div class="img">
                        <img src="images/limit-fan.jpeg" alt="">
                    </div>
                    <p><span class="red">￥299</span><del class="del">￥449</del></p>

                </li>
                <li class="goods-item">
                    <div class="img">
                        <img src="images/rain.jpg" alt="">
                    </div>
                    <p><span class="red">￥45</span><del class="del">￥59</del></p>

                </li>
            </ul>
        </div>

        <!-- 各种品牌特卖 -->
        <ul class="con special">
            <li class="special-item">
                <p class="title">特卖汇</p>
                <span>精选品牌特卖</span>
                <img src="images/xie.png" alt="">
            </li>
            <li class="special-item">
                <p class="title">优惠中心</p>
                <span>天天享优惠</span>
                <img src="images/jiu.png" alt="">
            </li>
            <li class="special-item">
                <p class="title">优购指南</p>
                <span>达人教你买</span>
                <img src="images/cup.png" alt="">
            </li>
            <li class="special-item">
                <p class="title">好店精选</p>
                <span>逛好店享特惠</span>
                <img src="images/polo.jpeg" alt="">
            </li>
        </ul>

        <!-- 推荐 -->
        <div class="recommend">
            <!-- 头部 -->
            <div class="recommend-hd">
                <div class="img">
                    <img src="images/recommend.png" alt="">
                </div>
                <span>推荐</span>
                <div class="img">
                    <img src="images/recommend1.png" alt="">
                </div>

            </div>

            <!-- 主体 -->
            <ul class="recommend-bd">
                <li class="recommend-item">
                    <img src="images/bad.jpg" alt="">
                    <div class="desc">
                        <p>芝华仕储物床C066</p>
                        <p>意式风情，平移储物，高承重</p>
                        <span>￥299</span>
                    </div>
                </li>
                <li class="recommend-item">
                    <img src="images/purifier.png" alt="">
                    <div class="desc">
                        <p>除醛空气净化器</p>
                        <p>贝昂除甲醛空气净化器A5</p>
                        <span>￥1899</span>
                    </div>
                </li>
                <li class="recommend-item">
                    <img src="images/smell.png" alt="">
                    <div class="desc">
                        <p>浴室空气清新香氛</p>
                        <p>让周边的空气多一点趣味</p>
                        <span>￥17起</span>
                    </div>
                </li>
                <li class="recommend-item">
                    <img src="images/towel.png" alt="">
                    <div class="desc">
                        <p>最生活轻柔系列</p>
                        <p>精选棉，高分子抗菌技术</p>
                        <span>￥29.9</span>
                    </div>
                </li>
                <li class="recommend-item">
                    <img src="images/light.png" alt="">
                    <div class="desc">
                        <p>Yeelight橱柜灯</p>
                        <p>多档可选，安装便捷</p>
                        <span>￥299</span>
                    </div>
                </li>
                <li class="recommend-item">
                    <img src="images/sofazoom.png" alt="">
                    <div class="desc">
                        <p>可定制功能沙发</p>
                        <p>意式风情，平移储物，高承重</p>
                        <span>￥299</span>
                    </div>
                </li>
                <li class="recommend-item">
                    <img src="images/cleaner.png" alt="">
                    <div class="desc">
                        <p>芝华仕储物床C066</p>
                        <p>意式风情，平移储物，高承重</p>
                        <span>￥299</span>
                    </div>
                </li>
                <li class="recommend-item">
                    <img src="images/pad.png" alt="">
                    <div class="desc">
                        <p>芝华仕储物床C066</p>
                        <p>意式风情，平移储物，高承重</p>
                        <span>￥299</span>
                    </div>
                </li>
                <li class="recommend-item">
                    <img src="images/Battery.png" alt="">
                    <div class="desc">
                        <p>芝华仕储物床C066</p>
                        <p>意式风情，平移储物，高承重</p>
                        <span>￥299</span>
                    </div>
                </li>
                <li class="recommend-item">
                    <img src="images/tooth.png" alt="">
                    <div class="desc">
                        <p>芝华仕储物床C066</p>
                        <p>意式风情，平移储物，高承重</p>
                        <span>￥299</span>
                    </div>
                </li>

            </ul>
        </div>

    </main>




    <!-- 尾部 -->
    <footer>
        <a href="#" class="current">
            <span class="iconfont icon-index"></span>
            <span class="desc">首页</span>
        </a>

        <a href="#">
            <span class="iconfont icon-classify"></span>
            <span class="desc">分类</span>
        </a>
        <a href="life.html">
            <span class="iconfont icon-life"></span>
            <span class="desc">生活</span>
        </a>
        <a href="#">
            <span class="iconfont icon-car"></span>
            <span class="desc">购物车</span>
        </a>
        <a href="#">
            <span class="iconfont icon-mine"></span>
            <span class="desc">我的</span>
        </a>
    </footer>


    <script src="lib/swiper-bundle.min.js"></script>
    <script src="js/index.js"></script>
</body>

</html>